<template>
  <div class="box">
    <div ref="balls" class="ball" v-for="item in menuList" :key="item.title" @onmousenter="eleStop(item,index)" @mouseenter="mousemove()" @mouseleave="mouseleave()" :class="isFlag ? 'active_item' : ''">
      <img :src="item.img" alt="">
      <p>{{ item.title }}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';

let isFlag = ref(false)

let menuList = reactive([
  {
    url: '',
    img: '/src/assets/image/重点车辆监管系统_nor.png',
    img2: '/src/assets/image/重点车辆监管系统_hov.png',
    title: '重点车辆监管系统11'
  },
  // },
  {
    url: '',
    img: '/src/assets/image/非机动车未带头盔识别系统_nor.png',
    img2: '/src/assets/image/非机动车未带头盔识别系统_hov.png',
    title: '非机动车未带头盔识别系统'
  },
  {
    url: '',
    img: '/src/assets/image/交通安全画像系统_nor.png',
    img2: '/src/assets/image/交通安全画像系统_hov.png',
    title: '交通安全画像系统'
  },
  {
    url: '',
    img: '/src/assets/image/交通态势监控系统_nor.png',
    img2: '/src/assets/image/交通态势监控系统_hov.png',
    title: '交通态势监控系统'
  },
  {
    url: '',
    img: '/src/assets/image/可视化作战平台_nor.png',
    img2: '/src/assets/image/可视化作战平台_hov.png',
    title: '可视化作战平台'
  },
  {
    url: '',
    img: '/src/assets/image/重点车辆监管系统_nor.png',
    img2: '/src/assets/image/重点车辆监管系统_hov.png',
    title: '重点车辆监管系统'
  }
]);

let balls = ref(null)

onMounted(async () => {


  // 获取天气信息
  await axios.get('http://v1.yiketianqi.com/api?unescape=1&version=v91&appid=63292542&appsecret=42gZ3Z4G&city=青岛',{
    headers:{
      'Content-Type':'application/x-www-form-urlencoded'
    }
  }).then(res=>{
    console.log(res,'天气数据')
  },error=>{
    console.log(error.message)
  })




  // const items = document.querySelectorAll('.ball');
  // console.log(balls.value)
  let items = balls.value
  // console.log(items)
  for (let i = 0; i < items.length; i++) {
    // console.log(i);
    items[i].style['animation-delay'] =
      -10 - 6.6 * i + 's,' + -6.6 * i + 's,' + -6.6 * i + 's';
  }
})

const mousemove = () => {
  isFlag.value = true;
}

const mouseleave = () => {
  isFlag.value = false;
  // console.log(v);
}

</script>

<style lang="css" scoped>
.active_item {
  animation-play-state: paused;
}

@keyframes animX {
  0% {
    left: 0px;
  }

  100% {
    left: 500px;
  }
}

@keyframes animY {
  0% {
    top: 0px;
  }

  100% {
    top: 500px;
  }
}

@keyframes scale {
  0% {
    transform: scale(0.6);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.5);
  }
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 1000px;
  height: 800px;
  border: 1px solid red;
  margin: 0 auto;
  .ball {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /*动画执行一次所需时间*/
  animation-duration: 20s, 20s, 40s;
  /*动画以何种运行轨迹完成一个周期 椭圆运动轨迹*/
  animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
  /*动画播放次数,无线循环播放*/
  animation-iteration-count: infinite;
  /*是否轮流反向播放动画 alternate:正向播放*/
  animation-direction: alternate;
  animation-name: animX, animY, scale;

    img {
      width: 100px;
    }

    p {
      font-size: 18px;
    }
  }
}

</style>